import { ProCard } from '@ant-design/pro-components';

export default () => {
  return (
    <>
      <ProCard split="vertical">
        <ProCard title="Left Details" colSpan="30%">
          Left Content
        </ProCard>
        <ProCard title="Left and Right Columns with Title" headerBordered>
          <div style={{ height: 360 }}>Right Content</div>
        </ProCard>
      </ProCard>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard Split 布局 Props 说明：</h4>
        <ul>
          <li>
            <strong>split</strong>: 分割方式，'vertical' 表示垂直分割
          </li>
          <li>
            <strong>children</strong>: ProCard 子组件
          </li>
        </ul>
        <h4>ProCard 子组件配置：</h4>
        <ul>
          <li>
            <strong>title</strong>: 卡片标题
          </li>
          <li>
            <strong>colSpan</strong>: 栅格列数，可以是百分比字符串如 '30%'
          </li>
          <li>
            <strong>headerBordered</strong>: 是否显示头部边框
          </li>
          <li>
            <strong>children</strong>: 卡片内容
          </li>
        </ul>
        <h4>ColSpan 百分比特点：</h4>
        <ul>
          <li>
            <strong>百分比控制</strong>: 使用百分比精确控制宽度比例
          </li>
          <li>
            <strong>响应式适配</strong>: 百分比会根据容器宽度自动调整
          </li>
          <li>
            <strong>灵活布局</strong>: 比固定栅格数更灵活的布局控制
          </li>
        </ul>
        <h4>布局效果：</h4>
        <ul>
          <li>
            <strong>左侧卡片</strong>: 占 30% 宽度，显示详细信息
          </li>
          <li>
            <strong>右侧卡片</strong>: 占剩余 70% 宽度，显示主要内容
          </li>
          <li>
            <strong>垂直分割</strong>: 两个卡片垂直排列
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>详情页面</strong>: 左侧显示详细信息，右侧显示主要内容
          </li>
          <li>
            <strong>编辑页面</strong>: 左侧显示表单，右侧显示预览
          </li>
          <li>
            <strong>列表页面</strong>: 左侧显示筛选条件，右侧显示列表
          </li>
          <li>
            <strong>仪表盘</strong>: 左侧显示导航，右侧显示内容
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>比例合理</strong>: 根据内容重要性合理分配宽度比例
          </li>
          <li>
            <strong>响应式考虑</strong>: 在小屏幕上可能需要调整布局
          </li>
          <li>
            <strong>视觉平衡</strong>: 确保整体布局的视觉平衡
          </li>
        </ul>
      </div>
    </>
  );
};
